/**MVVM
MVVM(软件设计模式) 视图 模型 视图模型
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）
MVVM主要实现了双向数据绑定，可以做到数据影响视图，视图影响数据。
是一种开发思想，实现方式有很多种，angular: 脏值检测  vue:数据拦截+发布订阅模式，观察模式，迭代模式，装饰器模式
*/

/*闭包
//demo1
var Singleton = (function(){
    let a = 1;
    return function(){
       console.log(a++)
    }
})() //因为立即被调用，所以Singleton返回的是一个内部函数，且齐作用域链保留着对外部函数变量的引用,所以重复调用不会重置外部变量的值。

//demo2
var closure = function(){
    let a = 1;
    return function(){
        console.log(a++);
    }
}
let fn = closure();
*/

/**事件循环 (js单线程,需要事件循环来管理整个程序运行) 微任务 >> DOM渲染 >> 宏任务
  全局代码(宏任务)
    同步任务会压进调用栈并立即执行 (如果这是一个函数,会进行一次新的事件循环)
    宏任务进入宏任务队列/微任务进入微任务队列
    当前宏任务的同步代码执行完毕(当前调用栈没有任务了)
     -执行微任务
     -执行宏任务
  
  宏任务: 全局script、setTimeOut、setInterval、I/O操作、UI渲染、fetch/ajax...
  微任务: Promise.resolve/reject Promise.prototype.then/catch/finally.. | queueMicrotask  MutationObserver
*/

/**git
   add . 添加工作区所有文件进入暂存区
   push  推送:(如果有人修改，会推送失败)
   fetch + push  先拉取，再推送
*/

/**Vite
    🔹Vite是基于Rollup和esBuild实现前端构建工具
      - Rollup是以es6模块规范为标准的构建工具，Vite可以说是Rollup的上层封装，Vite本身是不具备编译能力的，可以兼容大部分Rollup的插件。
        比webpack更轻量，打包出来的文件体积更小。es6推出了tree shaking机制，tree shaking就是当我们在项目中引入其他模块时，
        他会自动将我们用不到的代码，或者永远不会执行的代码摇掉，不打包到bundle中。
        rollup使用新的ESM(ECMAScript Module)，而Webpack用的是旧的CommonJS，而commonjs没有摇树机制（构建 ）。
      - tree-shaking机制，打包时候可以把引用到的模块和js语句打包成一个js文件，减少http请求，和无关的js代码，因为第三方类库很多我们用不到的代码
      - Esbuild是以性能为主的打包工具，由go语言编写，不能运行js，只能编译js，所以速度速度极快，功能较为简单(产出)。

    🔹Vite的优点
      - 更加工程化，构建项目更方便，学习成本低，vite专注于项目，为项目而生，不用你去考虑太多文件打包配置
       [ 而webpack更像是一个工具，专注于构建，需要很多配置，不同文件要引入不同的loader(css、ts...打包方案) ] 
      - 提供了dev server，热更新(无刷新更新)>热重载(包含页面刷新)

    🔹Vite为什么这么快？
      - 构建机制不同于webpack（一开始只去进行简单的预编译(dev sever开启后，会在node_module在生成.vite文件夹)，
        如入口文件index.html包含的脚本、用的的node模块、图片资源），而webpack需要把所有资源打包成bundle(js脚本)
        Vite热更新模块是基于ESM规范(ESM（ECMAScript Modules）是一种在 JavaScript 中使用模块化编程的标准。)实现的，
        通过 type="module"告诉浏览器，当前脚本使用 ESM 模式，
      浏览器会构建一个依赖关系图，借助浏览器原生的 ESM 能力完成模块的查找、解析、实例化到执行的过程(import export)
      - Vite热重载，每次修改只能发生局部的资源变换（注意区别HMR热更新:内容修改直接变化且不会刷新浏览器）
      - 使用了Esbuild的JavaScript打包工具， Esbuild只专注于js解析,基于go语言开发(高并发多线程)，而webpack是基于nodejs

    🔹预编译
       vite 的预编译是通过ebBuild(采用了Esm规范，go编写)实现的，能够解析js，对于模块中使用的是cjs或者AMDJS规范，则需要进行模块间的转换。
       比如我们在使用lodash-es时，lodash-es会有上百个文件请求， 我们需要使用预编译去处理这种情况，会帮我们打包成一个请求，
       并且Vite的dev server会帮我们把第三方库进行浏览器缓存Cache-Control-HTTP关于缓存的响应头。
       optimizeDeps: {exclude:[""]} //排除某些预编译，或加入某些预编译，vite只会预编译ES模块

    🔹import参数(3个)  '@xxx?url' 返回地址 '?raw'返回文件内容 '?worker'

    🔹使用WebAssembly 浏览器中可以运行的二进制编码语言，[assemblyscript.org],asc命令把js编译成wasm文件（cpu密集型，多线程用的worker）
     测试中wasm比原生js可以快3-15倍, 一般相同算法可能快2-5倍, 但是c++很多优质库可以比js的快10倍以上, 尤其是opencv和ffmpeg等
    
    🔹glob-import引入一个文件夹所有文件: const globModules = import.mete.glob('./glob/*') 返回数组，键是文件路径/值是文件内容 ('./glob/*-[0-9].js')
      Object.entries(globModules).forEach(([k,v])=>{ v().then(m=> console.log(k + 'm.default'))});
 
*/

/**Nodejs
    🔹主线程之外，还维护了一个"事件队列"（Event queue）。
      当用户的网络请求或者其它的异步操作到来时，node都会把它放到Event Queue之中
      此时并不会立即执行它，代码也不会被阻塞，继续往下走，直到主线程代码执行完毕。

      我们所看到的node.js单线程只是一个js主线程，本质上的异步操作还是由线程池完成的，
      node将所有的阻塞操作都交给了内部的线程池去实现，本身只负责不断的往返调度，并没有进行真正的I/O操作，
      从而实现异步非阻塞I/O，这便是node单线程和事件驱动的精髓之处了。
  */



   /**未整理
   *  ###工作笔记
   * 
   *  e.stopPropagation();  阻止冒泡
   *  e.preventDefault();   阻止默认事件 如a链接，鼠标右键
   *  获取子元素
   *  document.getElementsByClassName('demo')[0];  获取第一个demo类
   *  document.querySelector("#tbody > tr:nth-child(2)")
   *  e.childNodes  //所有子元素 
   *  e.firstChild  //第一个子元素
   *  e.lastChild   //最后一个子元素
   *  
   *  e.classList.contains('classname') 
   * 
   * 
   *  #等待下一次dom更新,可配合await，详情看vue3官网
   *  nextTick(()=>{ 
   *    const Index_menu = <HTMLDivElement>document.querySelector('.Index_menu');
   *    console.log(Index_menu); 
   *  })
   * 
   *  import index_bg from /index/assets/gc.jpg" //引入图片
   * 
   * 
   *  VUE3
   *  @click($event)  fn(e) e.target
   *  @click.prevent="showInfo" //阻止默认事件
   * 
   *  修改input @input="event => bg_opacity = (<HTMLInputElement>event.target).value"
   * 
   * 
   *  sessionStorage 通过点击链接（或者用了 window.open）打开的新标签页之间是属于同一个 session 的
   * 
   * 
   * 
   * 
   *  DOM
   *  获取当前活跃元素  console.log(document.activeElement);
   *  动态添加属性  Event.setAttribute('title','标题');
   * 
   */